{extend name="layout" /}
{block name="body"}    
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          
          <form action="{:url('add')}" method="post" name="add-form" class="row add-form">
            <div class="form-group col-md-12">
              <label for="name">广告标识</label>
              <div class="form-controls">
                <input type="text" class="form-control" id="name" name="name" value="" placeholder="请输入广告标识" />
                <small class="form-text text-muted">必填，由小写字母、数字或下划线组成，不能以数字开头，30个字符以内</small>
              </div>
            </div>
            <div class="form-group col-md-12">
              <label for="title">广告名称</label>
              <div class="form-controls">
                <input type="text" class="form-control" id="title" name="title" value="" placeholder="请输入广告名称" />
                <small class="form-text text-muted">必填，50个字符以内!</small>
              </div>
            </div>
            <div class="form-group col-md-12">
              <label for="timeset">时间限制</label>
              <div class="form-controls clearfix">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="timesetOne" name="timeset" class="custom-control-input" value="0" checked>
                  <label class="custom-control-label" for="timesetOne">永不过期</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="timesetTwo" name="timeset" class="custom-control-input" value="1">
                  <label class="custom-control-label" for="timesetTwo">在设内时间内有效</label>
                </div>
              </div>
            </div>
            {php}
            $form = ['title' => '开始时间-结束时间', 'name' => 'ad_time', 'extra_class' => 'd-none'];
            {/php}
            {include file="../application/admin/view/form/daterange.html" type='' /}
            <div class="form-group col-md-12" id="form_group_ad_type">
              <label for="type">广告类型</label>
              <div class="form-controls clearfix">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="typeOne" name="type" class="custom-control-input" value="0" checked>
                  <label class="custom-control-label" for="typeOne">代码</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="typeTwo" name="type" class="custom-control-input" value="1">
                  <label class="custom-control-label" for="typeTwo">文字</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="typeThree" name="type" class="custom-control-input" value="2">
                  <label class="custom-control-label" for="typeThree">图片</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="typeFour" name="type" class="custom-control-input" value="3">
                  <label class="custom-control-label" for="typeFour">flash</label>
                </div>
              </div>
            </div>
            {volist name="form_items" id="form"}
              {switch name="form.type"}
                {case value="textarea"}
                  {// 文本域 }
                  {include file="../application/admin/view/form/textarea.html" type='' /}
                {/case}
                {case value="image"}
                  {// 单张图片 }
                  {include file="../application/admin/view/form/image.html" type='' /}
                {/case}
                {case value="text"}
                  {// 输入框 }
                  {include file="../application/admin/view/form/text.html" type='' /}
                {/case}
                {case value="colorpicker"}
                  {// 取色器 }
                  {include file="../application/admin/view/form/colorpicker.html" type='' /}
                {/case}
              {/switch}
            {/volist}
            <div class="form-group col-md-12">
              <label>状态</label>
              <div class="form-controls clearfix">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="statusOne" name="status" class="custom-control-input" value="0">
                  <label class="custom-control-label" for="statusOne">禁用</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="statusTwo" name="status" class="custom-control-input" value="1" checked>
                  <label class="custom-control-label" for="statusTwo">启用</label>
                </div>
              </div>
            </div>
            <div class="form-group col-md-12">
              <button type="submit" class="btn btn-primary m-r-5 ajax-post" target-form="add-form">确 定</button>
              <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
            </div>
          </form>
 
        </div>
      </div>
    </div>
    
  </div>
{/block}
{block name="otherjs"}
{include file="../application/admin/view/form/formjs.html" /}
<script type="text/javascript">
    $(function () {
        // 单选按钮之间切换
        var triggers = {
            "timeset" : [
                ["1", "ad_time"]
            ],
            "type" : [
                ["0", "code"],
                ["1", "ad_text,color"],
                ["2", "one_pic,alt"],
                ["2,3", "width,height"],
                ["1,2,3", "link"]
            ]
        };
        $.each(triggers, function (trigger, content) {
            jQuery(document).delegate('[name='+ trigger +']', 'change', function (event, init) {
                var $trigger = $(this);
                var $value   = $trigger.val();
                
                $(content).each(function () {
                    var $self    = $(this);
                    var $values  = $self[0].split(',') || [];
                    var $targets = $self[1].split(',') || [];
                    
                    // 如果触发的元素是单选，且没有选中则设置值为空
                    if ($trigger.attr('type') == 'radio' && $trigger.is(':checked') == false) {
                        $value = '';
                    }
                    
                    if ($.inArray($value, $values) >= 0) {
                        // 符合指定的值，显示对应的表单项
                        for (var index in $targets) {
                            // 如果不是该对象自身直接创建的属性（也就是该属//性是原型中的属性），则跳过显示
                            if (!$targets.hasOwnProperty(index)) {
                                continue;
                            }
                            $('#form_group_'+$targets[index]).removeClass('d-none');
                        }
                    } else {
                        for (var item in $targets) {
                            $('#form_group_' + $targets[item]).addClass('d-none');
                        }
                    }
                });
            });
        });
    });
</script>
{/block}